<template>
  <div class="box">
    <div class="bb">
      <el-steps
        :active="formatStepStatus(order.status)"
        finish-status="success"
        align-center
      >
        <el-step title="提交订单" :description="order.orderTime"></el-step>
        <el-step title="支付订单" :description="order.checkoutTime"></el-step>
        <el-step title="平台发货"></el-step>
        <el-step title="确认收货"></el-step>
        <el-step title="完成评价"></el-step>
      </el-steps>
    </div>
    <div class="cardcs">
      <el-card class="box-card">
        <div class="operate-container">
          <i class="el-icon-warning color-danger" style="margin-left: 20px"></i>
          <span class="color-danger"
            >当前订单状态：{{ order.status | formatStatus }}</span
          >
          <div class="operate-button-container" v-show="order.status === 1">
            <el-button type="primary" size="mini" @click="xiugai1"
              >修改收货人信息</el-button
            >

            <el-button type="primary" size="mini">发送站内信</el-button>
            <el-button size="mini" @click="updateStatusId(order.id)"
              >取消订单</el-button
            >
            <el-button type="primary" size="mini">备注订单</el-button>
          </div>
          <div class="operate-button-container" v-show="order.status === 2">
            <el-button type="primary" size="mini" @click="xiugai1"
              >修改收货人信息</el-button
            >
            <el-button type="primary" size="mini">发送站内信</el-button>
            <el-button size="mini" @click="updateStatusId(order.id)"
              >取消订单</el-button
            >
            <el-button type="primary" size="mini">备注订单</el-button>
          </div>
          <div
            class="operate-button-container"
            v-show="order.status === 3 || order.status === 4"
          >
            <el-button type="primary" size="mini" @click="track(order.status)"
              >订单跟踪</el-button
            >
            <el-button type="primary" size="mini">发送站内信</el-button>
            <el-button type="primary" size="mini">备注订单</el-button>
          </div>

          <div class="operate-button-container" v-show="order.status === 5">
            <el-button size="mini" @click="deleteOrdersid(order.id)"
              >删除订单</el-button
            >
            <el-button type="primary" size="mini">备注订单</el-button>
          </div>
        </div>
        <div style="margin-top: 20px">
          <span icon-class="marker" style="color: #606266"></span>
          <span class="el-icon-s-ticket">基本信息</span>
        </div>
        <div class="table-layout">
          <el-row>
            <el-col :span="6" class="table-cell-title">订单编号</el-col>
            <el-col :span="6" class="table-cell-title">发货单流水号</el-col>
            <el-col :span="6" class="table-cell-title">用户账号</el-col>
            <el-col :span="6" class="table-cell-title">支付方式</el-col>
          </el-row>
          <el-row>
            <el-col :span="6" class="table-cell">{{ order.number }}</el-col>
            <el-col :span="6" class="table-cell">暂无</el-col>
            <el-col :span="6" class="table-cell">{{ order.userName }}</el-col>
            <el-col :span="6" class="table-cell">{{
              order.express | formatPayType(order.ecpresss)
            }}</el-col>
          </el-row>
          <el-row>
            <el-col :span="6" class="table-cell-title">配送方式</el-col>
            <el-col :span="6" class="table-cell-title">物流单号</el-col>
            <el-col :span="6" class="table-cell-title">自动确认收货时间</el-col>
            <el-col :span="6" class="table-cell-title">活动信息</el-col>
          </el-row>
          <el-row>
            <el-col :span="6" class="table-cell">{{
              order.express | formatExpress(order.express)
            }}</el-col>
            <el-col :span="6" class="table-cell">{{
              order.logisticsNo | formatNull
            }}</el-col>
            <el-col :span="6" class="table-cell">3小时</el-col>
            <el-col :span="6" class="table-cell">暂无</el-col>
          </el-row>
        </div>
        <div style="margin-top: 20px">
          <span icon-class="marker" style="color: #606266"></span>
          <span class="el-icon-s-ticket">收货人信息</span>
        </div>
        <div class="table-layout">
          <el-row>
            <el-col :span="8" class="table-cell-title">收货人</el-col>
            <el-col :span="8" class="table-cell-title">手机号码</el-col>
            <el-col :span="8" class="table-cell-title">收货地址</el-col>
          </el-row>
          <el-row>
            <el-col :span="8" class="table-cell">{{ order.consignee }}</el-col>
            <el-col :span="8" class="table-cell">{{ order.phone }}</el-col>
            <el-col :span="8" class="table-cell">{{ order.address }}</el-col>
          </el-row>
        </div>
        <div style="margin-top: 20px">
          <span icon-class="marker" style="color: #606266"></span>
          <span class="el-icon-s-ticket">商品信息</span>
        </div>
        <el-table
          :data="orderList"
          style="width: 100%; margin-top: 20px"
          border
        >
          <el-table-column prop="image" label="菜品图片" align="center">
            <template slot-scope="scope">
              <el-popover placement="right" trigger="hover">
                <img :src="scope.row.image" class="imgs" />
                <img
                  slot="reference"
                  :src="scope.row.image"
                  style="max-height: 50px; max-width: 150px"
                />
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="商品名称" align="center">
            <template slot-scope="scope">
              <p>{{ scope.row.name }}</p>
            </template>
          </el-table-column>
          <el-table-column label="价格/货号" width="120" align="center">
            <template slot-scope="scope">
              <p>价格：￥{{ scope.row.price }}</p>
              <p>商品码：{{ scope.row.code }}</p>
            </template>
          </el-table-column>
          <el-table-column label="口味" width="120" align="center">
            <template slot-scope="scope">
              <span
                v-for="(item, index) in JSON.parse(scope.row.flavor)"
                :key="index"
              >
                {{ item
                }}<span v-if="index < JSON.parse(scope.row.flavor).length - 1"
                  >、</span
                >
              </span>
            </template>
          </el-table-column>
          <el-table-column label="数量" width="120" align="center">
            <template slot-scope="scope">
              {{ scope.row.copies }}
            </template>
          </el-table-column>
          <el-table-column label="小计" width="120" align="center">
            <template slot-scope="scope">
              ￥{{ scope.row.price * scope.row.copies }}
            </template>
          </el-table-column>
        </el-table>

        <div style="float: right; margin: 20px">
          合计：<span class="color-danger">￥{{ order.amount }}</span>
        </div>
      </el-card>
    </div>

    <el-dialog
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
      title="修改收货人信息"
    >
      <!-- 添加表单 -->
      <el-form ref="order" :model="order" label-width="120px" class="tjsh">
        <el-form-item label="收货人姓名">
          <el-input
            v-model="order.consignee"
            placeholder="收货人姓名"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input v-model="order.phone" placeholder="手机号码"></el-input>
        </el-form-item>
        <el-form-item class="inAddress" label="所在区域：">
          <v-distpicker
            :province="order.addressProvince"
            :city="order.addressCity"
            :area="order.addressTown"
            @selected="onSelectRegion"
          >
          </v-distpicker>
        </el-form-item>
        <el-form-item label="详细地址">
          <el-input
            v-model="order.detailAddress"
            placeholder="详细地址"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="updateAddress">确认</el-button>
      </span>
    </el-dialog>

    <el-dialog :visible.sync="dialogDD" width="30%" :before-close="handleClose">
      <div style="height: 300px">
        <el-steps direction="vertical" :active="this.onstatusid">
          <el-step title="已付款"></el-step>
          <el-step title="已发货"></el-step>
          <el-step title="待收货"></el-step>
          <el-step title="已完成"></el-step>
        </el-steps>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getSelectById,
  updateAddress,
  getSelectId,
  deleteOrders,
  updateStatus,
} from "../../api/order";

export default {
  data() {
    return {
      id: null,
      active: 1,
      order: {
        consignee: "",
        phone: "",
        address: "",
        name: "",
        addressProvince: "",
        addressCity: "",
        addressTown: "",
        detailAddress: "",
      },
      orderList: [],
      dialogVisible: false,
      onstatusid: "",
      dialogDD: false,
    };
  },
  filters: {
    formatNull(value) {
      if (value === undefined || value === null || value === "") {
        return "暂无";
      } else {
        return value;
      }
    },
    formatLongText(value) {
      if (value === undefined || value === null || value === "") {
        return "暂无";
      } else if (value.length > 8) {
        return value.substr(0, 8) + "...";
      } else {
        return value;
      }
    },
    formatPayType(value) {
      if (value === 1) {
        return "支付宝";
      } else if (value === 2) {
        return "微信";
      } else {
        return "未支付";
      }
    },
    formatExpress(value) {
      if (value === 1) {
        return "美团";
      } else if (value === 2) {
        return "饿了么";
      } else {
        return "暂无";
      }
    },

    formatStatus(value) {
      if (value === 1) {
        return "待付款";
      } else if (value === 2) {
        return "待发货";
      } else if (value === 3) {
        return "已发货";
      } else if (value === 4) {
        return "已完成";
      } else if (value === 5) {
        return "已取消";
      } else {
        return "无效订单";
      }
    },
    formatPayStatus(value) {
      if (value === 0) {
        return "未支付";
      } else if (value === 4) {
        return "已退款";
      } else {
        return "已支付";
      }
    },
    formatDeliverStatus(value) {
      if (value === 0 || value === 1) {
        return "未发货";
      } else {
        return "已发货";
      }
    },
  },
  methods: {
    //省市区联动
    onSelectRegion(data) {
      this.orders.addressprovince = data.province.value;
      this.orders.addresscity = data.city.value;
      this.orders.addresstown = data.area.value;
    },
    // 步骤条
    next() {
      if (this.active++ > 2) this.active = 0;
    },
    formatStepStatus(value) {
      if (value === 1) {
        //待付款
        return 1;
      } else if (value === 2) {
        //带派送
        return 2;
      } else if (value === 3) {
        //3已派送
        return 3;
      } else if (value === 4) {
        //4已完成
        return 4;
      } else {
        //、已关闭、无限订单
        return 5;
      }
    },
    xiugai1() {
      this.dialogVisible = true;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          this.dialogVisible = false;
          done();
        })
        .catch((_) => {});
    },
    //修改
    async updateAddress() {
      var $this = this;
      let result = await updateAddress(this.order);
      if (result.data.code === 200) {
        //弹出消息
        $this.$message({
          message: "修改成功",
          type: "success",
          duration: 2000,
        });
        //关闭窗体

        $this.dialogVisible = false;
        this.$router.push({ name: "order" });
      }
    },
    async updateStatus(id) {
      var $this = this;
      let result = await updateStatus(id);
      if (result.data.code === 200) {
        //弹出消息
        $this.$message({
          message: "订单已取消",
          type: "success",
          duration: 2000,
        });
        this.$router.push({ name: "order" });
      }
    },
    //单个删除
    updateStatusId(id) {
      this.$confirm("确认取消？")
        .then((_) => {
          this.updateStatus(id);
          done();
        })
        .catch((_) => {});
    },
    async deleteOrder(id) {
      var $this = this;
      let result = await deleteOrders(id);
      if (result.data.code === 200) {
        //弹出消息
        $this.$message({
          message: "删除成功",
          type: "success",
          duration: 2000,
        });
        this.$router.push({ name: "order" });
      }
    },
    //追踪订单
    track(status) {
      this.dialogDD = true;
      this.onstatusid = status;
    },
    deleteOrdersid(id) {
      this.$confirm("确认删除？")
        .then((_) => {
          this.deleteOrder(id);
          done();
        })
        .catch((_) => {});
    },
  },
  created() {
    this.id = this.$route.params.id;
    if (this.id == null) {
      this.$router.push({ name: "order" });
    }
    getSelectId(this.id).then((response) => {
      this.order = response.data.orders;
    });
    getSelectById(this.id).then((response) => {
      this.order = response.data.orders;
      this.orderList.push(this.order);
    });
  },
};
</script>

<style lang="less" scoped>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
.box {
  margin-left: 10%;
  width: 1200px;
}
.bb {
  width: 1000px;
  margin-left: 5%;
  margin-bottom: 3%;
}

.statuscc {
  height: 100px;
  background-color: whitesmoke;
}
.textc {
  margin-top: 22px;
  margin-bottom: 12px;
}
.detail-container {
  width: 80%;
  padding: 20px 20px 20px 20px;
  margin: 20px auto;
}

.operate-container {
  background: #f2f6fc;
  height: 80px;
  margin: -20px -20px 0;
  line-height: 80px;
}

.operate-button-container {
  float: right;
  margin-right: 20px;
}

.table-layout {
  margin-top: 20px;
  border-left: 1px solid #dcdfe6;
  border-top: 1px solid #dcdfe6;
}

.table-cell {
  height: 60px;
  line-height: 40px;
  border-right: 1px solid #dcdfe6;
  border-bottom: 1px solid #dcdfe6;
  padding: 10px;
  font-size: 14px;
  color: #606266;
  text-align: center;
  overflow: hidden;
}

.table-cell-title {
  border-right: 1px solid #dcdfe6;
  border-bottom: 1px solid #dcdfe6;
  padding: 10px;
  background: #f2f6fc;
  text-align: center;
  font-size: 14px;
  color: #303133;
}
.el-button--default {
  padding: 6px 7px;
}
.el-button--primary {
  padding: 6px 7px;
}
.el-card__body {
  margin-top: 50px;
}
.address {
  display: flex;
  flex: 2;
}
</style>